<template>
  <div class="deviceDetailWrap">
    <div class="out">
      <el-button type="primary" style="margin:0 0 15px" size="medium">
        <i class="icon iconfont icondaochu"></i>
        导出PDF
      </el-button>
    </div>

    <table border="1" width="900px" class="deviceTable"></table>
  </div>
</template>

<script>
  import HttpInterface from '../../util/httpInterface';
  import httpConfig from "../../util/httpConfig"

  export default {
    name: "DeviceDetailInfo",
    data() {
      return {
        detailId: '',
        detailImg:''
      }
    },

    created() {
      this.showDetailInfo()
    },

    methods: {
      showDetailInfo() {
        var _this = this
        _this.detailId = this.$route.params.id
        var params = {
          id: _this.detailId
        }
        HttpInterface.requestGet(this, HttpInterface.URL_GET_BY_MECHANICAL_DEVICEID, params, function (res) {
          var data = res.data.other
          _this.tableList(data.mechanicalDevice)
        }, null, true)
      },

      tableList(data) {
        var str = ''
        this.detailImg = httpConfig.serverUrl + data.deviceImage
        if(data.mobilizationTime != "") this.mobilizationTime = data.mobilizationTime.substring(0,10)
        if(data.acceptanceTime != "") this.acceptanceTime = data.acceptanceTime.substring(0,10)
        if(data.deliveryTime != "") this.deliveryTime = data.deliveryTime.substring(0,10)

          str += `<tr>
              <th colspan="4" style="padding: 6px;">机械设备信息卡</th>
           </tr>
           <tr>
            <td colspan="2" width="600px" style="padding: 10px;">
              <img src="${this.detailImg}" width="100%" style="max-height:800px;padding: 4px;box-sizing: border-box" alt="">
            </td>
            <td style="text-align: center" colspan="2" >周二</td>
          </tr>
          <tr>
            <td style="font-weight: 700;padding: 10px 0;text-align: center " >设备名称</td>
            <td style="padding: 0 20px;text-align: center" >${data.deviceCnName}</td>
            <td style="font-weight: 700;padding: 10px 25px;text-align: center" >所属标段</td>
            <td style="padding: 0 20px;text-align: center" >${data.bidSection}</td>
          </tr>
          <tr>
            <td style="font-weight: 700;padding: 10px 0;text-align: center" >规格型号</td>
            <td style="padding: 0 20px;text-align: center" >${data.model}</td>
            <td style="font-weight: 700;padding: 10px 0;text-align: center" >设备责任人</td>
            <td style="padding: 0 20px;text-align: center" >${data.devicePerson}</td>
          </tr>
          <tr>
            <td style="font-weight: 700;padding: 10px 0;text-align: center" >操作手</td>
            <td style="padding: 0 20px;text-align: center" >秦学光</td>
            <td style="font-weight: 700;padding: 10px 0;text-align: center" >进场日期</td>
            <td style="padding: 0 20px;text-align: center" >${this.mobilizationTime}</td>
          </tr>
          <tr>
            <td style="font-weight: 700;padding: 10px 0;text-align: center" >设备编号</td>
            <td style="padding: 0 20px;text-align: center" >${data.deviceSerialNumber}</td>
            <td style="font-weight: 700;padding: 10px 0;text-align: center" >验收时期</td>
            <td style="padding: 0 20px;text-align: center" >${this.acceptanceTime}</td>
          </tr>
          <tr>
            <td style="font-weight: 700;padding: 10px 0;text-align: center" >所在部位</td>
            <td style="padding: 0 20px;text-align: center" >南京长江第五大桥北接线D1标钢筋大棚</td>
            <td style="font-weight: 700;padding: 10px 0;text-align: center" >撤场时期</td>
            <td style="padding: 0 20px;text-align: center " >${this.deliveryTime}</td>
          </tr>`

        $('.deviceTable').append(str)
      },
    }
  }
</script>

<style scoped>
  .deviceDetailWrap {
    padding: 20px 25px;
  }

  .deviceTable{
      font-size: 14px;
  }

  td {
    padding: 6px 15px;
    text-align: center;
    font-size: 14px;
  }
</style>
